<template>
	<view>
		<!-- 头部 -->
		 <uni-nav-bar background-color="#3286ed" fixed="true" statusBar="true" color="#fff" title="客户详情" left-icon="left"  right-text="修改" @clickRight="updateFn"  @clickLeft="backFn" ></uni-nav-bar>
		 <view class="customer_Top" >
		 	<view class="customerInfo_box">
		 		<view class="customer_title">客户名称：{{infoData.name}}</view>
				<view class="customer_title2">负责人：{{infoData.chargePersonName}}</view>
				<view class="customer_title2">最后跟进时间：{{infoData.finalFollowTime}}</view>
		 	</view>
			<view class="Buttom">
				<view class="left">
				<uni-icons class="icon" size="20" color="#fd9540" type="person-filled"></uni-icons> 
				<span >{{infoData.chargePersonName}}</span>
				</view>
				<view class="right">
				<uni-icons class="icon" size="20" color="#55aaff" type="calendar-filled"></uni-icons>
					<span  v-if="infoData.customerStatus==0">未知客户</span>
					<span  v-if="infoData.customerStatus==1">潜在客户</span>
					<span  v-if="infoData.customerStatus==2">意向客户</span>
				</view>
			</view>
		 </view>
		
		 <!-- tab切换 -->
		    <u-tabs :list="list" class="tabs" lineColor="#fd9540" lineWidth="85px" 
			:activeStyle="{ color: '#fd9540', fontWeight: 'bold', transform: 'scale(1.05)'}"
			:current="index"   @change="tabChange" 
			>	
			</u-tabs>
			<!-- tabs展示数据 -->
			 	<u--form labelPosition="left" class='orderdetails' labelWi	  ref="form1">
					<view class="box" v-if="index*1===0">
						<u-cell>
							<template #title>
								<view class="u-cell-text">基本信息</view>
							</template>
						</u-cell>
						<u-cell-group>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">创建人</text>
									<text class="u-cell-text">{{infoData.createBy}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">创建时间</text>
									<text class="u-cell-text">{{infoData.createTime}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">客户名称</text>
									<text class="u-cell-text">{{infoData.name}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">客户电话</text>
									<text v-if="user.userId==infoData.chargePersonId" class="u-cell-text">{{infoData.contactTelephone}}</text>
								    <text v-if="user.userId!=infoData.chargePersonId" style="color: dodgerblue;" class="u-cell-text">暂无查看权限</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">客户标签</text>
									<text  class="u-cell-text">{{infoData.labelName}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">客户来源</text>
									<text  class="u-cell-text">{{infoData.sourceName}}</text>
								
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">客户所属地区</text>
									<text   class="u-cell-text">{{infoData.region}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">客户类别</text>
									<text  class="u-cell-text">{{infoData.categoryName}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">客户状态</text>
									<text class="u-cell-text">{{infoData.customerStatusName}}</text>
								</view>
							</u-cell>
							
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">客户地址</text>
									<text class="u-cell-text">{{infoData.address}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">备注</text>
									<text class="u-cell-text">{{infoData.remark}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">流失原因</text>
									<text class="u-cell-text">{{infoData.lossReasonsNameName}}</text>
								</view>
							</u-cell>
							<u-cell>
								<view  slot="title" class="u-slot-title">
									<text class="u-cell-text">流失原因备注</text>
									<text class="u-cell-text">{{infoData.lossRemark}}</text>
								</view>
							</u-cell>
						</u-cell-group>
					</view>
					<view class="box" v-if="index*1===1">
						<u-cell  >
							<text slot="title">
								<view>总计{{total}}条</view>
								 
							</text>
							<text slot="value">
								<u-button size="mini" type="success" @click="addCustomer"> 添加客户记录</u-button>
							</text>
						</u-cell>
						<view>
							<view class="followList" v-for="(item,index) in followList" :key="index" @click="followDetails(item)">
								<view class="follow_title">客户名称 <view style="margin-left: 10px;">{{item.customerName}}</view>  </view>
								<view class="follow_title">跟进方式 <view style="margin-left: 10px;">{{item.followMethod}}</view></view>
								<view class="follow_title">跟进时间 <view style="margin-left: 10px;">{{item.followTime}}</view></view>
								<view class="follow_title">跟进人 <view style="margin-left: 10px;">{{item.followUserName}}</view></view>
							</view>
						</view>
					</view>
					<view class="box" v-if="index*1===2">
						<u-cell>
							<template #title>
								<view class="u-cell-text">资金管理</view>
							</template>
						</u-cell>
					</view>
					<view class="box" v-if="index*1===3">
						<u-cell>
							<template #title>
								<view class="u-cell-text">开票历史</view>
							</template>
						</u-cell>
					</view>
					<view class="box" v-if="index*1===4">
						<u-cell>
							<template #title>
								<view class="u-cell-text">开票信息</view>
							</template>
						</u-cell>
					</view>
					<view class="box" v-if="index*1===5">
						<u-cell>
							<template #title>
								<view class="u-cell-text">审批流程</view>
							</template>
						</u-cell>
					</view>
					<view class="box" v-if="index*1===6">
						<u-cell>
							<template #title>
								<view class="u-cell-text">审批历史</view>
							</template>
						</u-cell>
					</view>
				</u--form>
				
	</view>
</template>

<script>
	import { listFollow	} from '@/api/follow.js'
	import{getCustomer} from '@/api/customer.js'
	import{getInfo} from '@/api/login.js'
	import { getDicts } from '@/api/dictionary/index.js';
	export default {
		 
		data() {
			return {
				infoData:{},
				index:0,
				list:[
					{name:'基本信息'},
					{name:'跟进记录'},
					{name:'资金管理'},
					{name:'开票历史'},
					{name:'开票信息'},
					{name:'审批流程'},
					{name:'审批历史'},
				],
				user:{},
				labelOptions:[],
				sourceOptions:[],
				categoryOptions:[],
				customerStatusOptions:[],
				lossReasonsOptions:[],
				formData: {
				    pageNum: 1,
				    pageSize: 10,
				    customerName: '', //客户名称
					
				},
				followList:[],
				followMethodOptions:[],
				total:0,
				 
					
			}
		},
		onLoad(e) {
			console.log(e);
			console.log('2');
			this.getuserInfo()
			this.getlabeloptions()
			this.getsourceOptions()
			this.getcategoryOptions()
			this.getcustomerStatusOptions()
			this.getlossReasons()
			this.getCustomerinfo(e)
			this.getFollowMethod()
		},
		onShow(e){
			console.log('1');
		
			this.getFollow()
		},
		onReachBottom(){
			if(this.index==1){
				console.log('12');
				 if (this.formData.pageSize * this.formData.pageNum <= this.total) {
				  this.formData.pageNum++
				listFollow(this.formData).then(response=>{
					this.followList.push(...response.rows)
				})
				}else{
					console.log('加载完毕');
				}
			}
		},
		methods: {
			
			tabChange(e){
				console.log(e);
				this.index=e.index
				if(e.index==1){
						this.formData.customerId=this.infoData.id
						this.getFollow()
				}
			},
			getValue(arr, item) {
			    console.log(arr, item);
			    for (var i = 0; i < arr.length; i++) {
			        if (item == arr[i].dictValue) {
			            console.log(arr[i].dictLabel);
			            return arr[i].dictLabel
			        }
			    }
			},
			// 获取跟进记录列表
			async getFollow(){
				const res= await listFollow(this.formData)
				console.log(res);
				res.rows.forEach(item => {
				    item.followMethod = this.getValue(this.followMethodOptions, item.followMethod)
				})
				  this.followList = res.rows
				  this.total=res.total
			},
			getFollowMethod() {
			    getDicts('biz_followmethod').then(res => {
			        console.log(res);
			        this.followMethodOptions=res.data
			    })
			},
			//跳转详情页面
			followDetails(item){
				uni.navigateTo({
					url:'/pages/follow/followDetails/index?id='+item.id
				})
			},
			// 获取用户信息
			async getuserInfo(){
				let res=await getInfo()
				// console.log(res);
				this.user=res.user
			},
			// 获取客户信息详情
			async getCustomerinfo(val) {
				console.log(val.id);
				let res=await getCustomer(val.id)
				this.infoData=res.data
				this.infoData.labelName=this.getValue(this.labelOptions,res.data.label)
				this.infoData.sourceName=this.getValue(this.sourceOptions,res.data.source)
				this.infoData.categoryName=this.getValue(this.categoryOptions,res.data.category)
				this.infoData.customerStatusName=this.getValue(this.customerStatusOptions,res.data.customerStatus)
				this.infoData.lossReasonsNameName=this.getValue(this.getlossReasons,res.data.lossReasons)
			},
			backFn(){
				uni.navigateBack({
					delta:1
				})
			},
			// 修改
			updateFn(){
				uni.navigateTo({
					url:'/pages/customer/addcustomer/addcustomer?id='+this.infoData.id
				})
			},
			getValue(arr, item){
				for (var i = 0; i < arr.length; i++) {
				    if (item == arr[i].dictValue) {
				        return arr[i].dictLabel
				    }
				}
			},
			// 获取标签可选项
			async getlabeloptions(){
				 let res= await getDicts('biz_label')
				 this.labelOptions=res.data
			},
			async getsourceOptions(){
				let res=await getDicts('biz_source')
				this.sourceOptions=res.data
				// console.log(this.sourceOptions);
				
			},
			 async getcategoryOptions(){
			 	let res=await getDicts('biz_category')
			 	this.categoryOptions=res.data
			 },
			 async getcustomerStatusOptions(){
			  let res=await getDicts('biz_customer_status')
			  this.customerStatusOptions=res.data
			 },
			 async getlossReasons(){
			 	let res=await getDicts('biz_loss_reasons')
			 	this.lossReasonsOptions=res.data
			 },
			 // 客户
			 addCustomer(){
				 uni.navigateTo({
				 	url:'/pages/follow/addFollow/index'
				 })
			 }
			
		}
	}
</script>

<style lang="scss" scoped>
	// 跟进记录
	.followList{
		border-bottom: 1px solid #CCC;
		padding: 10px;
	}
	.follow_title{
		font-size: 12px;
		display: flex;
	}
	.customer_Top{
		width: 100%;
		.customerInfo_box{
			font-size: 14px;
			 background-color: #fff;
			 padding: 10px;
			 
			.customer_title{
				font-size: 14px;
				font-weight: 600;
			}
			.customer_title2{
				font-size: 12px;
			}
		}
		.Buttom{
			 border: 1px  #ccc;
			 border-style: solid none solid none; 
			 display: flex;
			 justify-content: space-between;
			min-height: 35px;
					 background-color: #fff;	
		 .right,.left{
				width: 50%;
				height: 35px;
				line-height: 35px;
			 
				.icon,.name{
				vertical-align:middle;
				 }
				.name{
				padding-left: 10px;
				}
				 
				}
				.left{
					border-right: 1px solid #ccc;
				}
				.right{
					padding-left: 5px;
				}
		}
	}
	.sumdata{
		background-color: #fff;
		margin-top: 13px;
		.top{
			padding-top: 5px;
			padding-bottom: 40px;
			height: 30px;
			line-height: 30px;
			.icon,.name{
				vertical-align:middle;
			}
		}
		.swiper{
			.text{
				min-height:  100px;
				width: 100px;
				background-color: #f5efef;
				margin-right: 5px;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-radius: 10px;
				span{
					 display: block;
					 padding-top: 10px;
					 color: #8b8b8b;
				}
			}
		}
	}
	.tabs{
		background-color: #fff;
	}
	.orderdetails{
		background-color: #fff;
		.u-slot-title{
			.u-cell-text{
				margin-right: 15px;
			}
		}
		
	}
	
 
</style>
